{extend name="layout:base" /}
{block name="page_style"}
  
{/block}
{block name="main_content"}
  <?php if(isset($show_sort)): ?>
    <div class="row">
      <div class="col-xs-12 mb-10 text-right">
        <div class="btn-group sort-list">
          <?php if(isset($param['sort_type'])){ $sort_type = $param['sort_type']; }else{ $sort_type = ''; } ?>
          <a href="{:url($current_action, array_merge($param, array('sort_type' => '')))}" class="btn btn-sm <?php if($sort_type == 'time_desc'){ echo('btn-default'); }else{ echo('btn-theme'); } ?>">推荐</a>
          <a href="{:url($current_action, array_merge($param, array('sort_type' => 'time_desc')))}" class="btn btn-sm <?php if($sort_type == 'time_desc'){ echo('btn-theme'); }else{ echo('btn-default'); } ?>">最新</a>
        </div>
      </div>
    </div>
  <?php endif; ?>
  <div class="row" id="masonry-grid">
    {include file="note/ajax_list" /}
  </div>
  <?php if($res->totalPage() > 1): ?>
    <div class="row">
      <div class="col-xs-12 col-sm-12 text-center masonry-pagination mb-20">
        <div class="hide" id="fall-loading">
          <p class="text-center"><img src="{$site_root}/static/index/images/loader/general/2.gif" alt="..."/> 正在加载中……</p>
        </div>
        <div class="" id="paginate-btn">
          <a class="btn btn-sm btn-theme" onclick="return waterFall(this);">查看更多</a>
        </div>
      </div>
    </div>
  <?php endif; ?>
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/masonry/dist/masonry.pkgd.min.js"></script>
  <script src="{$site_root}/static/common/js/imagesloaded.pkgd.min.js"></script>
  <script type="text/javascript">
    var waterfall_config = {
      totalPage : "{$res->totalPage()}",
      fetchUrl : "{:url($current_action, $param)}",
      currentPage : 1,
      isLoading: false
    };

    function waterFall(click_item){
      $clickItem = $(click_item);
      if(waterfall_config.currentPage < waterfall_config.totalPage){
        $.ajax({
          type: "GET",
          url: waterfall_config.fetchUrl,
          data: {"page": waterfall_config.currentPage+1},
          dataType: "HTML",
          beforeSend:function(){
            $("#fall-loading").removeClass("hide");
            $("#paginate-btn").addClass("hide");
            waterfall_config.isLoading = true;
          },
          complete:function(){
            
          },
          success:function(data){
            var $container = $('#masonry-grid');
            var $boxes = $(data);
            $container.append($boxes).imagesLoaded( function () {
              $container.masonry('appended', $boxes);
              // 当图片加载完后再显示"加载更多按钮"
              $("#fall-loading").addClass("hide");
              $("#paginate-btn").removeClass("hide");
              waterfall_config.isLoading = false;
            });
            waterfall_config.currentPage += 1;
            if(waterfall_config.currentPage >= waterfall_config.totalPage){
              $("#paginate-btn").remove();
            }
            return false;
          }
        });
      }else{
        $clickItem.val("没有了");
        $clickItem.attr("disabled", "disabled");
      };
      return false;
    }

    $(function(){
      var $container = $('#masonry-grid');

      $container.imagesLoaded( function () {
        $container.masonry({
          itemSelector: '.masonry-item',
          isAnimated: true
        });  
      });
    });
  </script>
{/block}